<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业职员管理系统 - 注册</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 复用登录页面样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: url('loginBackground.jpg');
            background-size: cover;
            background-color: #f5f7fa;
        }

        .register-container {
            background: #fff;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 500px;
            margin: 20px;
            transition: transform 0.3s;
        }

        .register-container:hover {
            transform: translateY(-5px);
        }

        .logo {
            text-align: center;
            margin-bottom: 30px;
        }

        .logo i {
            font-size: 2.5rem;
            color: #2c3e50;
        }

        .form-group {
            margin-bottom: 20px;
            position: relative;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #2c3e50;
            font-weight: 500;
        }

        .input-icon {
            position: relative;
        }

        .input-icon i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #7f8c8d;
        }

        input, select {
            width: 100%;
            padding: 12px 15px 12px 40px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        input:focus, select:focus {
            outline: none;
            border-color: #3498db;
        }

        button {
            width: 100%;
            padding: 12px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.3s;
        }

        button:hover {
            background: #2980b9;
        }

        .captcha-container {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .captcha-input {
            flex: 1;
            margin-right: 10px;
        }

        .captcha-display {
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 5px;
            padding: 10px 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 2px solid #e0e0e0;
            cursor: pointer;
            user-select: none;
        }

        .links {
            margin-top: 20px;
            text-align: center;
        }

        .links a {
            color: #7f8c8d;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s;
        }

        .links a:hover {
            color: #3498db;
        }

        .password-strength {
            font-size: 12px;
            margin-top: 5px;
            color: #7f8c8d;
        }

        .form-row {
            display: flex;
            gap: 15px;
        }

        .form-row > div {
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="register-container">
        <div class="logo">
            <i class="fas fa-user-plus"></i>
            <h2>新员工注册</h2>
        </div>

        <form id="registerForm" onsubmit="return validateForm()">
            <div class="form-row">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <div class="input-icon">
                        <i class="fas fa-user"></i>
                        <input type="text"
                               id="username"
                               name="username"
                               placeholder="请输入用户名"
                               required>
                    </div>
                </div>

                <div class="form-group">
                    <label for="employeeName">真实姓名</label>
                    <div class="input-icon">
                        <i class="fas fa-id-card"></i>
                        <input type="text"
                               id="employeeName"
                               name="employeeName"
                               placeholder="请输入真实姓名"
                               required>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="password">密码</label>
                    <div class="input-icon">
                        <i class="fas fa-lock"></i>
                        <input type="password"
                               id="password"
                               name="password"
                               placeholder="至少6位字符"
                               required
                               minlength="6">
                    </div>
                    <div class="password-strength">密码强度：低</div>
                </div>

                <div class="form-group">
                    <label for="confirmPassword">确认密码</label>
                    <div class="input-icon">
                        <i class="fas fa-lock"></i>
                        <input type="password"
                               id="confirmPassword"
                               name="confirmPassword"
                               placeholder="请再次输入密码"
                               required>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="gender">性别</label>
                    <div class="input-icon">
                        <i class="fas fa-venus-mars"></i>
                        <select id="gender" name="gender" required>
                            <option value="">请选择性别</option>
                            <option value="M">男</option>
                            <option value="F">女</option>
                            <option value="Other">其他</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label for="birthDate">出生日期</label>
                    <div class="input-icon">
                        <i class="fas fa-calendar"></i>
                        <input type="date"
                               id="birthDate"
                               name="birthDate"
                               required
                               max="2005-12-31">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="email">电子邮箱</label>
                <div class="input-icon">
                    <i class="fas fa-envelope"></i>
                    <input type="email"
                           id="email"
                           name="email"
                           placeholder="example@company.com"
                           required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="phone">联系电话</label>
                    <div class="input-icon">
                        <i class="fas fa-phone"></i>
                        <input type="tel"
                               id="phone"
                               name="phone"
                               placeholder="13800138000"
                               pattern="[0-9]{11}">
                    </div>
                </div>

                <div class="form-group">
                    <label for="hireDate">入职日期</label>
                    <div class="input-icon">
                        <i class="fas fa-calendar-check"></i>
                        <input type="date"
                               id="hireDate"
                               name="hireDate"
                               required>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="address">联系地址</label>
                <div class="input-icon">
                    <i class="fas fa-map-marker-alt"></i>
                    <input type="text"
                           id="address"
                           name="address"
                           placeholder="请输入详细地址">
                </div>
            </div>

            <div class="form-group">
                <label>验证码</label>
                <div class="captcha-container">
                    <div class="captcha-input">
                        <input type="text"
                               id="captchaInput"
                               name="captcha"
                               placeholder="请输入验证码"
                               required
                               maxlength="4">
                    </div>
                    <div class="captcha-display" id="captchaDisplay" onclick="generateCaptcha()"></div>
                </div>
            </div>

            <button type="submit">立即注册</button>

            <div class="links">
                <a href="login">已有账号？立即登录</a>
            </div>
        </form>
    </div>

    <script>
        // 验证码生成（复用登录页面逻辑）
        function generateCaptcha() {
            const captchaDisplay = document.getElementById('captchaDisplay');
            const captcha = Math.floor(1000 + Math.random() * 9000);
            captchaDisplay.textContent = captcha;
            window.currentCaptcha = captcha;
        }

        // 密码强度检测
        function checkPasswordStrength(password) {
            const strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,}$/;
            const mediumRegex = /^(?=.*[a-zA-Z])(?=.*\d)[^]{6,}$/;

            if (strongRegex.test(password)) return '高';
            if (mediumRegex.test(password)) return '中';
            return '低';
        }

        // 表单验证
        function validateForm() {
            const formData = {
                username: document.getElementById('username').value.trim(),
                employeeName: document.getElementById('employeeName').value.trim(),
                password: document.getElementById('password').value,
                confirmPassword: document.getElementById('confirmPassword').value,
                gender: document.getElementById('gender').value,
                birthDate: document.getElementById('birthDate').value,
                email: document.getElementById('email').value.trim(),
                phone: document.getElementById('phone').value.trim(),
                hireDate: document.getElementById('hireDate').value,
                address: document.getElementById('address').value.trim(),
                captcha: document.getElementById('captchaInput').value
            };

            // 前端验证


            if (formData.password !== formData.confirmPassword) {
                alert('两次输入的密码不一致');
                return false;
            }

            if (!formData.gender) {
                alert('请选择性别');
                return false;
            }

            if (new Date(formData.birthDate) > new Date()) {
                alert('出生日期不能晚于当前日期');
                return false;
            }

            if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(formData.email)) {
                alert('请输入有效的邮箱地址');
                return false;
            }

            if (formData.phone && !/^1[3-9]\d{9}$/.test(formData.phone)) {
                alert('请输入有效的手机号码');
                return false;
            }

            if (formData.captcha !== window.currentCaptcha?.toString()) {
                alert('验证码错误，请重新输入');
                generateCaptcha();
                return false;
            }

            // 禁用按钮防止重复提交
            const submitBtn = document.querySelector('button[type="submit"]');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 注册中...';

            // 发送注册请求
            fetch('api/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('注册成功！即将跳转到登录页面');
                    window.location.href = 'login';
                } else {
                    alert(data.message || '注册失败');
                    generateCaptcha();
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('网络请求失败');
            })
            .finally(() => {
                submitBtn.disabled = false;
                submitBtn.innerHTML = '立即注册';
            });

            return false;
        }

        // 初始化日期字段
        window.onload = function() {
            generateCaptcha();
            document.getElementById('hireDate').value = new Date().toISOString().split('T')[0];
        }

        // 实时密码强度检测
        document.getElementById('password').addEventListener('input', function(e) {
            const strength = checkPasswordStrength(e.target.value);
            document.querySelector('.password-strength').textContent = `密码强度：${strength}`;
        });
    </script>
</body>
</html>